<!DOCTYPE html>
<meta charset="UTF-8">
<div style="margin: 10px 0;"></div>
<div style="position: relative; overflow: hidden; border: 1px solid #ccc; width: 500px; height: 300px">
	<div data-type="draggable" data-defs="onDrag:onDrag"
		style="width: 100px; height: 100px; background: #fafafa; border: 1px solid #ccc;"></div>
</div>
<script>
	function onDrag(e) {
	    var d = e.data;
	    d.left = repair(d.left);
	    d.top = repair(d.top);
	    
	    function repair(v) {
		    var r = parseInt(v / 20) * 20;
		    if (Math.abs(v % 20) > 10) {
			    r += v > 0 ? 20 : -20;
		    }
		    return r;
	    }
    }
</script>
